<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YUMO.AI - 机器人管理</title>
    <link rel="icon" href="https://witmore.oss-cn-hangzhou.aliyuncs.com/agent/favicon.ico">
    <link rel="stylesheet"
          href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/element-ui/2.15.14/lib/theme-chalk/index.css">
    <link href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/font-awesome/6.4.0/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/dashboard.css">
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/tailwindcss/3.4.16/tailwindcss.min.js"></script>
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/vue/2.6.14/vue.min.js"></script>
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/element-ui/2.15.14/index.js"></script>
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/marked/15.0.12/marked.min.js"></script>
    <script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/purify/3.2.6/purify.min.js"></script>
    <script src="/js/common.js"></script>
    <script th:inline="javascript">
        var agentList = /*[[${agentList}]]*/ {};
        // console.log('agentList->', agentList)
        var recordPageInfo = /*[[${recordPageInfo}]]*/ {};
        var pagination = {
            current: recordPageInfo.current || 1,
            size: recordPageInfo.size || 10,
            total: recordPageInfo.total || 0,
        };
        console.log('pagination',pagination);
        var recordList = recordPageInfo.records || [];
    </script>
</head>
<body>

<div class="dashboard-container">

    <th:block th:replace="~{fragments/header::header}"></th:block>
    <th:block th:replace="~{fragments/sidebar::sidebar}"></th:block>

    <!-- 主内容区 -->
    <div class="main-content sidebar-content" id="robot" v-cloak>
        <!-- 页面内容 -->
        <div class="p-6 py-0">
            <!-- 筛选栏 -->
            <div class="filter-bar flex items-center">
                <div class="search-input">
                    <i class="fas fa-search"></i>
                    <el-input class="inp" type="text" placeholder="请输入关键词" v-model="search_str" @input="filterList"></el-input>
                </div>
            </div>

            <!-- 机器人卡片网格 -->
            <div class="robot-grid">

                <!-- 添加机器人卡片 -->
                <div class="robot-card add-robot p-3" data-bs-toggle="modal"
                     data-bs-target="#robotModal" @click="handleAddOne">
                    <i class="fas fa-plus-circle add-icon"></i>
                    <div class="add-text">创建机器人</div>
                </div>

                <!-- 动态渲染机器人列表 -->
                <div class="robot-card relative p-3" v-for="(agent,index) in agentList">
                    <div class="absolute z-1 top-0 right-0 p-4">
                        <el-dropdown @command="handleCommand">
                            <span>
                                <i class="fas fa-ellipsis-h text-[20px]"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="edit" @click.native="handleEditOne(agent)">重命名
                                </el-dropdown-item>
                                <el-dropdown-item command="lock" @click.native="handleLockOne(agent)">
                                    {{agent.locked ? '解锁' : '锁定'}}
                                </el-dropdown-item>
                                <el-dropdown-item command="copy" @click.native="handleCopyOne(agent)">复制
                                </el-dropdown-item>
                                <el-dropdown-item command="del" divided :disabled="agent.locked" @click.native="handleDelOne(agent)">
                                    <span class="text-[#ff1100]" :style="agent.locked?'opacity:.5':''">删除</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <h3 class="robot-name">{{agent.agentName || '机器人名称'}}</h3>
                    <span class="robot-type">机器人类型</span>
                    <div class="robot-status">
                        <span class="status-enabled" :class="agent.webPublishStatus != 1 ? 'status-disabled' : ''">
                            WEB预览：{{agent.webPublishStatus == 1 ? '已启用' : '已禁用'}}
                        </span>
                    </div>
                    <div class="robot-created">
                        创建时间：{{agent.createTime}}
                    </div>
                    <div class="robot-actions">
                        <el-button type="primary" size="mini" @click="goDetailPage(agent)">配置</el-button>
                        <!-- 锁定图标 -->
                        <span class="lock-icon px-2" :class="agent.locked ? 'locked' : ''">
                            <i class="fas fa-lock" v-if="agent.locked"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <th:block th:replace="~{fragments/dashboard/robot-modal::robot-modal}"></th:block>

    </div>

    <!-- 会话区域-->
    <div class="main-content sidebar-content hidden" id="conversation">
        <th:block th:replace="~{fragments/dashboard/conversation::conversation}"></th:block>
    </div>
</div>

<script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/Pxmu.js/1.1.0/pxmu.min.js"></script>
<script src="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/axios/0.19.0/axios.min.js"></script>
<script th:src="@{/js/request.js}"></script>
<script th:src="@{/js/api_robot.js}"></script>
<script th:src="@{/js/dashboard.js}"></script>
<script th:src="@{/js/conversation.js}"></script>
</body>
</html>